<template>
  <div>
    <h3>编程式导航的操作</h3>
    <hr />
    <router-link :to="{ name: 'authChild' }"
      >AuthChildView的常规跳转</router-link
    >
    <hr />
    <p>username:{{ username }}</p>
    <input type="text" placeholder="名称" v-model="username" />
    <p>当username中有值时，通过下述标签可以跳转页面，否则不能跳转</p>
    <input
      type="button"
      value="检测username后跳转页面"
      @click="checkUsername()"
    />
    <input type="button" value="后退" @click="$router.back()" />
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
    };
  },
  methods: {
    checkUsername() {
      console.log("完成js的逻辑控制");
      if (this.username == "") {
        alert("username为空");
      } else {
        alert("username的值：" + this.username);
        // 后续需要完成路由的切换跳转
        //    this.$router 就是项目中通过 new VueRouter 创建的路由对象 【路由控制对象】
        //        => 1. 包含路由相关配置
        //        => 2. 基于路由的原型,提供切换路由的操作方法
        console.log(this.$router);
        // push 方法就是JS用于完成vue路由切换的方法,功能等效于 router-link
        // push(to)  to 参数用于定义跳转的路由路径配置
        //           to 参数取值规则等同于 router-link to 属性取值规则

        // this.$router.push("/auth/child");
        // this.$router.push("/home");

        this.$router.push({
          name: "authChild",
        });

        // repalce 从跳转功能上和 push 一致,但使用该方法跳转后,无法回退到当前页面
        // this.$router.replace({
        //   name: "authChild",
        // });
      }
    },
  },
};
</script>
